/*
*   @Author: 1296
*   @Date: 2025-03-20
*   @Description: 关于
*/

<script setup>
const version = 'v1.0.0';
</script>

<template>
  <div class="about-container">
    <div class="content-wrapper">
      <img src="@/assets/aboutLogo.png" alt="Logo" class="logo">
      <img src="@/assets/title.png" alt="Title" class="title">
      <div class="version">{{ $t('version') }}{{ version }}</div>
    </div>
  </div>
</template>

<style scoped>
.about-container {
  min-height: 100vh; /* 改为最小高度保证内容扩展 */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  opacity: 0;
  animation: fadeIn 2s ease forwards;
  padding: 20px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 90%;
  max-width: 800px;
  margin-top: -10vh;
}

.logo {
  width: clamp(50px, 40vw, 300px);
  height: auto;
}

.title {
  width: clamp(50px, 40vw, 300px);
  height: auto;
  margin-top: -10px;
}

.version {
  color: #666;
  font-size: clamp(10px, 2vw, 16px);
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  .content-wrapper {
    margin-top: 0;
    gap: 15px;
  }

  .logo,
  .title {
    width: 70vw;
  }

  .version {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .logo,
  .title {
    width: 85vw;
  }
}
</style>